/**
 * 基本颜色
 */

$orange: #ee5313!default; //主题色：橙色
$darkOrange:#d43a11; //深橙色
$color:#333;
$gray: #999; //灰色
$black: #000; // 黑色
$lightGray:#f2f2f2; //浅灰
$grayBg:#ececec; //body灰色背景
$white:#fff; //白色
$blue:#0069cb; //蓝色
$hoverBlue: #3f93e0; // 悬停蓝色
$green: #4ab244; //基础绿色
$red:#e5171a; //红色
$distance:0.75rem; //边距
$distance_s:0.6rem;
$line:#e0e0e0; //线条颜色
$placeholder: #666;
$borderColor: #eee;

/* 灰色系
  -------------------------- */

$gray-8d:#8d8d8d;
$gray-e:#eeeeee;

/* 绿色系
  -------------------------- */

$green-0c7d:#00cc7d;

/* input 高度
  -------------------------- */
$input-height: 28px;

/* 公用函数
-------------------------- */
@mixin fd($direction) {
    display: flex;
    flex-direction: $direction;
}

@mixin wh($width, $height) {
    width: $width;
    height: $height;
}

@mixin sc($size, $color) {
    font-size: $size;
    color: $color;
}

@mixin bw($borderDirection, $width, $color) {
    border-#{$borderDirection}:#{$width}px solid $color;
}

@mixin imgVHM() {
    text-align: center;
    font-size: 0;
    &:after {
        display: inline-block;
        width: 0;
        height: 100%;
        content: "";
        vertical-align: middle;
    }
    img {
        vertical-align: middle;
    }
}

@mixin imgVB() {
    font-size: 0;
    &:after {
        display: inline-block;
        width: 0;
        height: 100%;
        content: "";
        vertical-align: bottom;
    }
    img {
        vertical-align: bottom;
    }
}

@mixin boxcenter() {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@mixin ltrb($left, $top, $right, $bottom) {
    @if $left !=none {
        left: $left;
    }
    @if $top !=none {
        top: $top;
    }
    @if $right !=none {
        right: $right;
    }
    @if $bottom !=none {
        bottom: $bottom;
    }
}

@mixin clearfix() {
    *zoom: 1;
    &:after {
        content: "\0020";
        display: block;
        clear: both;
    }
}

@mixin hover() {
    &:hover {
        color: $blue;
    }
}

@for $i from 1 through 6 {
    .p-#{$i*5} {
        padding: $i * 5px;
    }
}

@for $i from 1 through 6 {
    .pt-#{$i*5} {
        padding-top: $i * 5px;
    }
}

@for $i from 1 through 6 {
    .pr-#{$i*5} {
        padding-right: $i * 5px;
    }
}

@for $i from 1 through 6 {
    .pb-#{$i*5} {
        padding-bottom: $i * 5px;
    }
}

@for $i from 1 through 6 {
    .pl-#{$i*5} {
        padding-left: $i * 5px;
    }
}

@for $i from 1 through 6 {
    .m-#{$i*5} {
        margin: $i * 5px;
    }
}

@for $i from 1 through 6 {
    .mt-#{$i*5} {
        margin-top: $i * 5px;
    }
}

@for $i from 1 through 50 {
    .mr-#{$i*5} {
        margin-right: $i * 5px;
    }
}

@for $i from 1 through 6 {
    .mb-#{$i*5} {
        margin-bottom: $i * 5px;
    }
}

@for $i from 1 through 6 {
    .ml-#{$i*5} {
        margin-left: $i * 5px;
    }
}

@for $i from 6 through 12 {
    .f-#{$i*2} {
        font-size: $i * 2px;
    }
}

.cesium-viewer-navigationContainer {
    top: 121px !important;
}

.cesium-credit-imageContainer {
    display: none;
}

.smControlZoomOut {
    display: none
}

.smControlZoomIn {
    display: none
}